<template>
  <view class="cu-bar tabbar margin-bottom-xl bg-white">
    <view class="action" :class="currentIndex === 0 ? 'text-green' : 'text-gray'" @click="switchTab(0, 'index')">
      <view class="cuIcon-homefill iconfont" :class="currentIndex === 0 ? 'active icon-shouye1' : 'icon-shouye'"></view> 首页
    </view>
    <view class="action" v-if="isDev === 'release'" :class="currentIndex === 1 ? 'text-green' : 'text-gray'" @click="switchTab(1, 'guesslike')">
      <view class="cuIcon-similar iconfont" :class="currentIndex === 1 ? 'active icon-leimupinleifenleileibie2' : 'icon-fenlei'"></view> 猜你喜欢
    </view>
    <!-- #ifdef MP-QQ -->
    <view class="action text-gray" @click="switchTab(2, 'classify')">
      <view class="cuIcon-similar iconfont icon-iconfontzhizuobiaozhun22" ></view> 搜索
    </view>
    <!-- #endif -->
    <!-- #ifndef MP-QQ -->
    <view class="action add-action" @click="switchTab(2)">
      <button class="cu-btn cuIcon-add bg-green shadow iconfont icon-iconfontzhizuobiaozhun22"></button>
      搜索
    </view>
    <!-- #endif -->
    <view class="action" v-if="isDev === 'release'" :class="currentIndex === 3 ? 'text-green' : 'text-gray'" @click="switchTab(3, 'favorite')">
      <view class="cuIcon-cart iconfont" :class="currentIndex === 3 ? 'active icon-shoucang1' : 'icon-shoucang'">
        <view v-if="userInfo.favoriteNumber" class="cu-tag badge">{{userInfo.favoriteNumber}}</view>
      </view>
      收藏
    </view>
    <view class="action" :class="currentIndex === 4 ? 'text-green' : 'text-gray'" @click="switchTab(4, 'usercenter')">
      <view class="cuIcon-my iconfont" :class="currentIndex === 4 ? 'active icon-wode' : 'icon-weibiaoti-'">
        <view class="cu-tag badge" v-if="!userInfo.hasCheckIn"></view>
      </view>
      我的
    </view>
  </view>
</template>

<script>
  export default {
    components: {},
    props: {
      currentIndex:{ // 当前选中下标
        type: Number,
        default: 0,
      }
    },
    data() {
      return {
      }
    },
    computed:{
      isDev(){
        return this.$store.state.isDev
      },
      userInfo(){
        return this.$store.state.userInfo
      },
    },
    created() {
    },
    methods: {
      switchTab(index, ref){
        if(index === 2){
          // 搜索为单独新页面
          uni.navigateTo({
            url: '/pages/search/index'
          });
        } else {
          this.$emit('switch', {
            index: index,
            ref: ref
          })
        }
      },
    }
  }
</script>

<style scoped lang="scss">
  .cu-bar.tabbar{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0;
    z-index: 200;
    /* #ifdef MP-QQ */
    .iconfont{
      margin-bottom: 10upx;
    }
    /* #endif */
    .text-green{
      color: #2f5085;
    }
    .active {
      animation: icon_active .5s cubic-bezier(.17, .89, .32, 1.8);
    }
    @keyframes icon_active {
      0%, 17.5% {
        font-size: 0;
      }
    }
    .bg-green{
      background-color: #2f5085;
    }
  }
</style>
